<template>
	<view class="edit-page">
		<!-- 表单内容 -->
		<scroll-view class="form-scroll" scroll-y>
			<view class="form-wrapper">
				<!-- 公司名称 -->
				<view class="form-group">
					<input class="form-input" v-model="formData.company" placeholder="公司名称" />
				</view>

				<!-- 岗位名称 -->
				<view class="form-group">
					<input class="form-input" v-model="formData.position" placeholder="岗位名称" />
				</view>

				<!-- 工作时间 -->
				<view class="form-row">
					<view class="form-group half-width">
						<input class="form-input" v-model="formData.startDate" placeholder="开始日期" />
					</view>
					<view class="form-group half-width">
						<input class="form-input" v-model="formData.endDate" placeholder="结束日期"
							:disabled="formData.isCurrent" />
					</view>
				</view>

				<!-- 工作描述 -->
				<view class="form-group">
					<textarea class="form-textarea" v-model="formData.description" placeholder="工作描述"></textarea>
				</view>

				<!-- 工作成果 -->
				<view class="section-title">工作成果</view>

				<view class="items-container">
					<view class="item-row" v-for="(item, index) in formData.accomplishments" :key="index">
						<input class="form-input item-input" v-model="formData.accomplishments[index]"
							placeholder="请输入具体成果" />
						<button class="delete-btn" @click="removeAccomplishment(index)"
							v-if="formData.accomplishments.length > 1">
							<text>×</text>
						</button>
					</view>

					<button class="add-btn" @click="addAccomplishment">
						<text>+ 添加成果</text>
					</button>
				</view>
			</view>
		</scroll-view>

		<!-- 保存按钮 -->
		<button class="save-btn" @click="onSave">保存</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				formData: {
					company: '',
					position: '',
					startDate: '',
					endDate: '',
					description: '',
					accomplishments: ['']
				}
			};
		},

		onLoad(option) {
			if (option.id) {
				this.getDetail(option.id)
			}
		},

		methods: {
			async getDetail(id) {
				const parmse = {
					databaseName: 'workExperience',
					state: 'look',
					_id: id
				};

				let res = await this.$axios('overallSituation', parmse, true)
				if (res.code == 200) {
					this.formData = res.data[0] || {}
					console.log(this.formData, 'this.formData');
				}
			},

			isCurrentChange(e) {
				console.log(e, 'e');
			},

			addAccomplishment() {
				this.formData.accomplishments.push('');
			},
			removeAccomplishment(index) {
				this.formData.accomplishments.splice(index, 1);
			},
			onCancel() {
				uni.navigateBack();
			},
			async onSave() {
				if (!this.formData.company || !this.formData.position || !this.formData.startDate) {
					uni.showToast({
						title: '请填写必填信息',
						icon: 'none'
					});
					return;
				}

				// 准备提交数据
				const submitData = {
					...this.formData,
					databaseName: 'workExperience',
					queryId: uni.getStorageSync('userInfo')._id,
					state: this.formData._id ? 'update' : 'add'
				};

				// 调用接口保存
				let res = await this.$axios('overallSituation', submitData)
				if (res.code == 200) {
					this.$showToast('操作成功')
					uni.navigateBack()
				} else {
					this.$showToast('保存失败')
				}
			}
		}
	};
</script>

<style scoped>
	.edit-page {
		display: flex;
		flex-direction: column;
		height: 100vh;
		background-color: #f5f7fa;
	}

	/* 顶部导航 */
	.header {
		display: flex;
		align-items: center;
		padding: 0 30rpx;
		box-sizing: border-box;
		height: 100rpx;
		background-color: white;
		border-bottom: 1px solid #eee;
	}

	.back-button {
		background: none;
		border: none;
		color: #666;
		font-size: 28rpx;
		padding: 0;
		margin-right: 20rpx;
	}

	.page-title {
		font-size: 34rpx;
		font-weight: 600;
		color: #333;
		flex: 1;
		text-align: center;
	}

	/* 表单区域 */
	.form-scroll {
		padding: 20rpx;
		box-sizing: border-box;
		height: 89vh;
		overflow-y: auto;
	}

	.form-wrapper {
		background-color: white;
		border-radius: 16rpx;
		padding: 30rpx;
		box-sizing: border-box;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
	}

	.form-group {
		margin-bottom: 28rpx;
	}

	.form-input {
		width: 100%;
		height: 90rpx;
		padding: 0 24rpx;
		box-sizing: border-box;
		border: 1px solid #eee;
		border-radius: 10rpx;
		font-size: 28rpx;
		box-sizing: border-box;
	}

	.form-input::placeholder {
		color: #ccc;
	}

	.form-row {
		display: flex;
		gap: 20rpx;
		margin-bottom: 28rpx;
	}

	.half-width {
		flex: 1;
		margin-bottom: 0;
	}

	/* 复选框 */
	.checkbox-group {
		display: flex;
		align-items: center;
		margin: 10rpx 0 30rpx;
	}

	.checkbox {
		transform: scale(1.2);
		margin-right: 15rpx;
	}

	.checkbox-text {
		font-size: 28rpx;
		color: #666;
	}

	/* 文本区域 */
	.form-textarea {
		width: 100%;
		min-height: 160rpx;
		padding: 24rpx;
		box-sizing: border-box;
		border: 1px solid #eee;
		border-radius: 10rpx;
		font-size: 28rpx;
		box-sizing: border-box;
		resize: vertical;
		line-height: 1.6;
	}

	.form-textarea::placeholder {
		color: #ccc;
	}

	/* 工作成果区域 */
	.section-title {
		font-size: 28rpx;
		color: #333;
		margin: 30rpx 0 15rpx;
		font-weight: 500;
	}

	.items-container {
		display: flex;
		flex-direction: column;
		gap: 15rpx;
	}

	.item-row {
		display: flex;
		align-items: center;
		gap: 15rpx;
	}

	.item-input {
		flex: 1;
	}

	.delete-btn {
		width: 60rpx;
		height: 60rpx;
		background-color: #fff0f0;
		color: #ff4d4f;
		border: none;
		border-radius: 8rpx;
		font-size: 30rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.add-btn {
		width: 100%;
		height: 40px;
		background-color: #f0faff;
		color: #38bdf8;
		border: 1px dashed #91d5ff;
		border-radius: 10rpx;
		font-size: 28rpx;
		margin-top: 10rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	/* 保存按钮 */
	.save-btn {
		width: calc(100% - 40rpx);
		height: 40px;
		margin: 20rpx;
		background-color: #38bdf8;
		color: white;
		border: none;
		border-radius: 10rpx;
		font-size: 32rpx;
		font-weight: 500;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.save-btn:active {
		background-color: #0ea5e9;
	}
</style>